<template>
    <view class="page">
        <view class="header-images">
            <view v-if="showSwiper" class="uni-margin-wrap">
                <swiper
                    class="swiper"
                    circular
                    :indicator-dots="false"
                    :autoplay="true"
                >
                    <swiper-item>
                        <view class="swiper-item uni-bg-red">
                            <image
                                class="swiper-item-image"
                                src="/static/images/banner.png"
                                mode="heightFix"
                            ></image>
                        </view>
                    </swiper-item>
                    <swiper-item>
                        <view class="swiper-item uni-bg-red">
                            <image
                                class="swiper-item-image"
                                src="/static/images/banner.png"
                                mode="heightFix"
                            ></image>
                        </view>
                    </swiper-item>
                    <swiper-item>
                        <view class="swiper-item uni-bg-red">
                            <image
                                class="swiper-item-image"
                                src="/static/images/banner.png"
                                mode="heightFix"
                            ></image>
                        </view>
                    </swiper-item>
                </swiper>
            </view>
            <view v-if="!showSwiper" class="swiper">
                <image
                    class="swiper-item-image"
                    src="/static/images/goods.png"
                    mode="heightFix"
                ></image>
            </view>

            <view class="header-controller" @click="showSwiper = !showSwiper">
                <view class="swiper-btn" :class="{ active: showSwiper }"
                    >实物图1/3</view
                >
                <view class="swiper-btn" :class="{ active: !showSwiper }"
                    >素材图</view
                >
            </view>
        </view>

        <view class="good-info">
            <view class="good-price">
                <view class="price-now">￥129.99</view>
                <view class="price">素材价￥29.99</view>
                <view class="score">
                    <view class="num">8.8分</view>
                    <view class="score-xin">
                        <wd-rate :modelValue="2" size="12px" space="10px" />
                    </view>
                </view>

                <view class="sales"> 销量 1w+ </view>
            </view>

            <view class="good-name">夏日清爽感OOTD&DIY限定款</view>
            <view class="good-tags">
                <view class="tag" v-for="item in [1, 2, 3, 4]">ootd</view>
            </view>
            <view class="detail">
                新学期穿搭不能输，DIY 单品来相助！T恤就是时
                新学期穿搭不能输，DIY 单品来相助！T恤就是时
                新学期穿搭不能输，DIY 单品来相助！T恤就是时
                新学期穿搭不能输，DIY 单品来相助！T恤就是时</view
            >
        </view>

        <view class="designer">
            <designer :show-good="false"></designer>
        </view>

        <view class="rating-content">
            <view class="rating-header">
                <div class="rating-name">评价(6)</div>
                <div class="rating-btn">查看详情</div>
            </view>
            <view class="rating-ul">
                <RatingItem v-for="item in [1, 2, 3, 4, 5, 6]"></RatingItem>
            </view>
        </view>

        <view class="rating-content heat-content">
            <view class="rating-header">
                <div class="rating-name">热门同款</div>
                <div class="rating-btn">查看更多</div>
            </view>
            <view class="good-ul">
                <HeatGood
                    v-for="(item, index) in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]"
                    :key="index"
                ></HeatGood>
            </view>
        </view>

        <view class="footer acea-row row-between-wrapper">
            <view class="item" @click="setCollect" v-if="storeInfo.userCollect">
                <image src="" class="item-image"></image>
                <text>收藏</text>
            </view>
            <view
                class="item"
                @click="setCollect"
                v-if="!storeInfo.userCollect"
            >
                <image src="" class="item-image"></image>
                <text>收藏</text>
            </view>
            <view class="item">
                <button open-type="contact" class="contacButton">
                    <view style="padding-bottom: 8rpx" class="item">
                        <image src="" class="item-image"></image>
                        <text>客服</text>
                    </view>
                </button>
            </view>
            <view
                @click="goShoppingCart()"
                v-if="animated"
                class="item animated bounceIn"
            >
                <image src="" class="item-image"></image>
                <text class="num bg-color-red" v-if="CartCount > 0">{{
                    CartCount
                }}</text>
                <text>购物车</text>
            </view>

            <view class="bnt acea-row">
                <view class="joinCart" @click="joinCart">
                    <text>加入购物车</text>
                </view>
                <view class="buy" @click="tapBuy">
                    <text>立即购买</text>
                </view>
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
import Designer from '@/components/designer/Designer.vue';
import RatingItem from '@/components/RatingItem.vue';
import HeatGood from '@/components/HeatGood.vue';
import { reactive, shallowRef } from 'vue';

const showSwiper = shallowRef(true);

const storeInfo = reactive({});
</script>

<style scoped lang="scss">
.page {
    width: 100vw;
    min-height: 100vh;
    background: #f3f7f8;
}

.header-images {
    position: relative;
    width: 100%;
    height: 720rpx;
    .uni-margin-wrap {
    }
    .swiper {
        width: 100%;
        height: 720rpx;
        .swiper-item {
            width: 100%;
            height: 720rpx;
        }
        .swiper-item-image {
            width: 100%;
            height: 100%;
        }
    }
    .header-controller {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: absolute;
        bottom: 16rpx;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 208rpx;
        height: 40rpx;
        background: rgba(255, 255, 255, 0.5);
        border-radius: 24rpx 24rpx 24rpx 24rpx;
        font-weight: 400;
        font-size: 20rpx;
        color: #222222;
        line-height: 40rpx;
        text-align: center;
        padding: 4px;
        .swiper-btn {
            padding: 0 8rpx;
        }
        .swiper-btn.active {
            background: #ffffff;
            border-radius: 16rpx 16rpx 16rpx 16rpx;
        }
    }
}

.good-info {
    background: #ffffff;
    box-shadow: 0rpx 2rpx 4rpx 2rpx rgba(0, 0, 0, 0.08);
    border-radius: 8rpx 8rpx 8rpx 8rpx;
    margin: 16rpx;
    padding: 24rpx 16rpx;

    .good-price {
        display: flex;
        align-items: center;
        gap: 16rpx;
        .price-now {
            height: 52rpx;
            font-weight: bold;
            font-size: 40rpx;
            color: #f25a27;
            line-height: 52rpx;
        }
        .price {
            width: 148rpx;
            height: 28rpx;
            background: #f25a27;
            border-radius: 4rpx 4rpx 4rpx 4rpx;
            font-weight: 400;
            font-size: 20rpx;
            color: #ffffff;
            line-height: 28rpx;
            text-align: center;
        }
        .score {
            display: flex;
            align-items: center;
            font-weight: 400;
            font-size: 20rpx;
            color: #666666;
            gap: 12rpx;
        }

        .sales {
            font-weight: 400;
            font-size: 20rpx;
            color: #666666;
        }
    }

    .good-name {
        font-weight: bold;
        font-size: 32rpx;
        color: #222222;
        line-height: 44rpx;
    }

    .good-tags {
        display: flex;
        align-items: center;
        gap: 20rpx;
        .tag {
            font-weight: 400;
            font-size: 28rpx;
            color: #f25a27;
            line-height: 40rpx;
        }
    }
    .detail {
        font-weight: 400;
        font-size: 28rpx;
        color: #f25a27;
        line-height: 40rpx;
    }
}

.rating-content {
    margin: 16rpx;
    padding: 16rpx;
    background: #ffffff;
    box-shadow: 0rpx 2rpx 4rpx 2rpx rgba(0, 0, 0, 0.08);
    border-radius: 8rpx 8rpx 8rpx 8rpx;
    .rating-header {
        padding: 16rpx 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .rating-name {
            font-weight: bold;
            font-size: 28rpx;
            color: #222222;
            line-height: 40rpx;
        }

        .rating-btn {
            height: 40rpx;
            background: #f3f7f8;
            border-radius: 24rpx 24rpx 24rpx 24rpx;
            font-weight: 400;
            font-size: 20rpx;
            color: #222222;
            line-height: 40rpx;
            text-align: center;
            padding: 0 16rpx;
        }
    }

    .rating-ul {
        display: flex;
        flex-direction: column;
        gap: 16rpx;
    }
}

.good-ul {
    width: calc(100vw - 32rpx);
    display: flex;
    gap: 16rpx;
    overflow: auto;
}

.footer {
    position: fixed;
    bottom: 0;
    width: calc(100vw - 64rpx);
    height: 156rpx;
    background: #ffffff;
    box-shadow: 0rpx -2rpx 4rpx 2rpx rgba(9, 9, 9, 0.08);
    display: flex;
    align-items: center;
  padding: 0 32rpx;

    .item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 8rpx;
      margin: 0 32rpx 0 0;

        .item-image {
            width: 40rpx;
            height: 35rpx;
        }
        .contacButton {
            padding: 0;
            background-color: #fff;
            line-height: 25rpx;
        }
        text {
            font-weight: 400;
            font-size: 20rpx;
            color: #222222;
            line-height: 28rpx;
            text-align: center;
        }
    }
    .bnt {
        display: flex;
        align-items: center;
        gap: 16rpx;
        justify-self: end;
      margin-left: auto;
        .joinCart {
            width: 217rpx;
            height: 72rpx;
            background: #f3f7f8;
            font-weight: 400;
            font-size: 28rpx;
            color: #222222;
            line-height: 72rpx;
            text-align: center;
        }
        .buy {
            width: 217rpx;
            height: 72rpx;
            background: linear-gradient(90deg, #f32f1a 0%, #f68a2d 100%);
            font-size: 28rpx;
            color: #ffffff;
            line-height: 72rpx;
            text-align: center;
        }
    }
}
</style>
